<!-- 装备基础属性 -->
<template>
    <el-card v-for="column in columns">
      <!-- 标题栏 -->
      <template #header>
        <div class="card-header">
          <span>{{ column.name }}</span>
        </div>
      </template>
      <!-- 表单栏 -->
      <el-form :model="equipment">
        <el-form-item v-for="prop in column.properties" :key="prop.field" :label="prop.label">
         <!-- 装备类型下拉框 -->
          <el-select
            v-if="prop.field === 'type'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            placeholder="请选择装备类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in equipTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

           <!-- 出售价格类型下拉框 -->
          <el-select
            v-else-if="prop.field === 'sellPriceType'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            placeholder="请选择出售价格类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in priceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 装备品级下拉框 -->
          <el-select
            v-else-if="prop.field === 'grade'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            placeholder="请选择出品级"
            style="width: 100%"
          >
            <el-option
              v-for="item in gradeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 布尔值选择框 -->
          <el-switch
            v-else-if="prop.type === 'boolean'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
          />
          <!-- 数字输入框 -->
          <el-input-number
            v-else-if="prop.type === 'number'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            controls-position="right"
            style="width: 100%"
          />
          <!-- 字符串输入框 -->
          <el-input
            v-else
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElTree } from 'element-plus';
import {ajax } from '@/api';
import { ElMessage } from 'element-plus';
import { number } from 'echarts';
import type { EquipTpl } from '@/pojo/equip-tpl';
const props = defineProps<{
  equipment?: EquipTpl; // 必须符合 Equipment 类型、
  openType: string; // 打开方式 add/edit/preview
}>();

// 装备类型选项
const equipTypeOptions = ref([
  { value: 0, label: '武器' },
  { value: 1, label: '帽子' },
  { value: 2, label: '衣服' },
  { value: 3, label: '裤子' },
  { value: 4, label: '鞋子' },
  { value: 5, label: '项链' },
  { value: 6, label: '戒指' },
  { value: 7, label: '英雄之戒' },
  { value: 8, label: '药囊' },
  { value: 9, label: '职业徽章' },
  { value: 10, label: '职业武器' },
  { value: 11, label: '时装' }
]);
// 出售价格类型选项
const priceTypeOptions = ref([
  { value: 0, label: '铜钱' },
  { value: 1, label: '元宝' },
  { value: 2, label: '绑定元宝' },
  { value: 3, label: '积分' }
]);
// 装备品级类型选项
const gradeOptions = ref([
  { value: 0, label: '一品' },
  { value: 1, label: '二品' },
  { value: 2, label: '三品' },
  { value: 4, label: '四品' },
  { value: 5, label: '五品' },
  { value: 6, label: '六品' },
  { value: 7, label: '七品' },
  { value: 8, label: '八品' },
  { value: 9, label: '九品' },
  { value: 10, label: '神品' },
  { value: 11, label: '魂品' },
  { value: 12, label: '圣品' },
  { value: 13, label: '家族' },
  { value: 14, label: '绝世' },
]);
let columns = ref([
    {
      name: '基础属性',
      properties: [
        { field: 'name', label: '装备名称', type: 'string' },
        { field: 'icon', label: '装备图标', type: 'string' },
        { field: 'description', label: '装备描述', type: 'string' },
        { field: 'type', label: '装备类型', type: 'number' },
        { field: 'levelLimited', label: '装备否限制等级', type: 'boolean' },
        { field: 'levelLimit', label: '装备限制等级数', type: 'number' },
        { field: 'grade', label: '装备品级', type: 'number' },
        { field: 'sellPriceType', label: '出售价格类型', type: 'number' },
        { field: 'sellPrice', label: '出售价格', type: 'number' }
      ]
    }
])


// 监听传入参数的变化
watch(
  () => props.equipment,
  (newVal, oldVal) => {
    console.log('权限参数发生变化:', newVal, oldVal);
    if (newVal) {
    
    }
  }
);
</script>

<style scoped></style>
